<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="../../img/favicon.ico"/>
<link rel="stylesheet" href="../../css/uikit/uikit.css"/>
<script src="../../js/common/jquery.min.js"></script>
<script src="../../js/common/vue.min.js"></script>
<script src="../../js/common/uikit.js"></script>

<link rel="stylesheet" href="../../css/main.css"/>
<script lang="javascript" src="../../js/utils.js"></script>
<script lang="javascript" src="../../js/docker.js"></script>
<script lang="javascript">
    doImport("org.voovan.docker.command.Service.CmdServiceCreate")
    doImport("org.voovan.docker.command.Service.CmdServiceList")
    doImport("org.voovan.docker.command.Service.CmdServiceRemove")
    doImport("org.voovan.docker.command.Service.CmdServiceUpdate")

    function init() {
        serviceListVue = new Vue({
            el: '#ServiceApp',
            data: {
                serviceList: null,
                servicdTaskCountList:{},
                queryParams:{
                    name:"",
                    id:"",
                    status:"All"
                }
            },
            computed:{
                networks: function(){
                    try {
                        return getNetworksIdAndName();
                    } catch (e) {
                        alertError(e)
                    }
                }
            },
            methods: {
                //查询方法
                query: function () {
                    try {
                        var cmdServiceList = new CmdServiceList();
                        connect(cmdServiceList);

                        if (this.queryParams.id != "") {
                            cmdServiceList.id([this.queryParams.id]);
                        }

                        if (this.queryParams.name != "") {
                            cmdServiceList.name([this.queryParams.name]);
                        }

                        //cmdServiceList.label("author","helyho");
                        this.serviceList = cmdServiceList.send().sortBy("id", true);
                        cmdServiceList.close();
                        cmdServiceList.release();
                    } catch (e) {
                        alertError(e)
                    }

                    //读取并统计任务数
                    try {
                        var taskList = getTaskList();
                        var servicdTaskCountList = {};

                        for(var i=0;i<taskList.length;i++) {
                            task = taskList[i];
                            if(servicdTaskCountList[task.serviceId]==undefined){
                                servicdTaskCountList[task.serviceId] = 1;
                            }else{
                                servicdTaskCountList[task.serviceId] = servicdTaskCountList[task.serviceId] +1;
                            }
                        }

                        this.servicdTaskCountList = servicdTaskCountList;
                    } catch (e) {
                        alertError(e)
                    }
                },
                //移除方法
                remove: function (service) {
                    try{
                        name = service.spec.name;
                        id = service.id

                        UIkit.modal.confirm("<span class='uk-text-large uk-text-danger'>Are you sure to remove </span><span class='uk-text-large uk-text-primary'>[ " + name + " ]</span> ?", function () {
                            try {
                                var cmdServiceRemove = new CmdServiceRemove(id);
                                connect(cmdServiceRemove);
                                cmdServiceRemove.send();
                                cmdServiceRemove.close();
                                cmdServiceRemove.release();
                                serviceListVue.query();
                            } catch (e) {
                                alertError(e)
                            }
                        });
                    } catch (e) {
                        alertError(e)
                    }
                },

                scale: function(service){
                    UIkit.modal.prompt("<span class='uk-text-large uk-text-primary '>Replicas:</span>", service.spec.mode.replicated.replicas, function(newvalue){
                        try {
                            var cmdServiceUpdate = new CmdServiceUpdate(service);
                            connect(cmdServiceUpdate);
                            cmdServiceUpdate.replicate(newvalue)
                            cmdServiceUpdate.send();
                            cmdServiceUpdate.close();
                            cmdServiceUpdate.release();
                            serviceListVue.query();
                        } catch (e) {
                            alertError(e)
                        }
                    });
                }
            }
        });
        var urlId = getQueryString("id");
        serviceListVue.queryParams.id = urlId==null?"" : urlId;
        if(urlId != null){
            $("#query").hide();
        }
        serviceListVue.query()
    }
</script>
<body onload="init()" class="frameBody">
<div id="ServiceApp" class="uk-grid" style="display: none" v-show="this.serviceList!=null">
    <div class="uk-width-6-6">
        <div class="uk-panel"></div>
        <h3></h3>
        <div class="uk-grid uk-margin">
            <div class="uk-width-1-2">
                <h3 class="uk-text-middle">
                    <span class="icon uk-icon-gears"></span> Service manager
                </h3>
            </div>
            <div class="uk-width-1-2 uk-text-right">
                <a href="list.html"><span class="uk-icon-refresh"></span></a>
            </div>
        </div>
        <div id="query" class="uk-panel uk-panel-box uk-text-bold">
            <div class="uk-grid">
                <div class="uk-width-5-6 uk-form">
                    <span class="mr5">Id:</span>
                    <input class="uk-form-width-medium"
                           type="text" placeholder="service  id" v-model="queryParams.id">
                    <span class="mr5">Name:</span>
                    <input class="uk-form-width-medium"
                           type="text" placeholder="service name" v-model="queryParams.name">
                    <a class="uk-button uk-button-small" @click="query()"><i class="uk-icon-search"></i></a>
                </div>
                <div class="uk-width-1-6 uk-text-right">
                    <a href="create.html" class="uk-button uk-button-small uk-button-primary"><i class="uk-icon-plus-square"></i> </a>
                </div>
            </div>
        </div>
        <table id="serviceList" class="uk-table uk-overflow-service uk-panel-box">
            <thead>
            <tr>
                <th class="uk-text-center table_colume_index">NO.</th>
                <th>ID</th>
                <th>Name</th>
                <th>Image</th>
                <th>IP</th>
                <th class="uk-text-center">Replicas</th>
                <th class="uk-text-center">Created</th>
                <th class="uk-text-center">Updated</th>
                <th class="uk-text-center">Operation</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(service,index) in serviceList">
                <td class="uk-text-center uk-text-middle uk-text-small">{{index}}</td>
                <td class="uk-text-bold uk-text-middle uk-text-primary ">
                    {{service.id|shortDockerId(12)}}
                </td>
                <td class="uk-text-bold uk-text-middle uk-text-danger">
                    {{service.spec.name}}
                </td>
                <td class="uk-text-bold uk-text-middle uk-text-warning">
                    {{service.spec.taskTemplate.containerSpec.image | shortDockerId(64)}}
                </td>
                <td class="uk-text-middle">
                    <div v-for="virtualIP in service.endpoint.virtualIPs">
                        <a :href="'../network/viewer.html?id='+virtualIP.networkId"
                           target="view">
                        <code>{{networks[virtualIP.networkId]}}:{{virtualIP.addr}}</code>
                        </a>
                    </div>
                </td>
                <td class="uk-text-middle uk-text-bold uk-text-success uk-text-center">
                    {{servicdTaskCountList[service.id]==null?"0":servicdTaskCountList[service.id]}} / {{service.spec.mode.replicated.replicas}}
                </td>
                <td class="uk-text-middle uk-text-center">
                   {{service.createdAt|strToDate}}
                </td>
                <td class="uk-text-middle uk-text-center">
                    {{service.updatedAt|strToDate}}
                </td>
                <td class="uk-text-center uk-text-middle">
                    <div class="uk-button-group">
                        <a :href="'viewer.html?id='+service.id" class="uk-button uk-button-primary uk-button-small">
                            <span class="uk-icon-list-alt"></span> View
                        </a>
                        <div data-uk-dropdown="{mode:'click'}">
                            <!-- 触发下拉菜单的按钮 -->
                            <a href="" class="uk-button uk-button-primary uk-button-small"><span class="uk-icon-caret-down"></span></a>

                            <!-- 下拉菜单 -->
                            <div class="uk-dropdown uk-dropdown-small">
                                <ul class="uk-nav uk-nav-dropdown uk-text-left">
                                    <li><a href="#"
                                           class=" uk-text-primary"
                                           @click="scale(service)"><span class="uk-icon-sliders"></span> Scale</a></li>
                                    <li><a href="#" @click="remove(service)"
                                           class=" uk-text-danger"><span class="uk-icon-trash"></span> Remove</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="uk-width-6-6">
        <div style="min-height:40px;" class="uk-text-center uk-margin-bottom">
            <div><img height="27" width="120" src="../../img/logo.png"/></div>
            <div>CopyRight <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
            <div>Powered by Voovan open source framework.</div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>